<template>
  <div class="city top-page">
    <!-- 搜索框 -->
     <div class="top">
        <!-- 1.搜索框 -->
        <van-search 
            v-model="searchValue"  
            shape="round"
            show-action
            placeholder="城市/区域/位置" 
            @cancel="cancelClick"
        />
        <!-- 2.Tab的切换 -->
         <!-- tabActive默认索引 -->
        <van-tabs v-model:active="tabActive" color="var(--primary-color)" line-height="3">
        <template v-for="(value, key) in allCities" :key="key">
            <van-tab :title="value.title" :name="key"></van-tab>
        </template>
        </van-tabs>
     </div>
     <div class="content">
        <template v-for="(value, key) in allCities" :key="key">
            <city-group v-show="tabActive === key" :group-data="value" />
        </template>
     </div>
    

  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router'
import cityGroup from './cpns/city-group.vue';
import useCityStore from '@/stores/modules/city';
const router = useRouter()

// 搜索框功能
const searchValue = ref("")
const cancelClick = () => {
  // 返回上一页
  router.back()
}

// Tab的切换
const tabActive = ref()

// 从Store中获取所有的城市信息
const cityStore = useCityStore()
cityStore.fetchAllCitiesData()
const { allCities } = cityStore
const currentGroup = computed(() => allCities.value[tabActive.value])
</script>

<style lang="less" scoped>
.city{
//   .top{
//     position: fixed;
//     top: 0;
//     left: 0;
//     right: 0;
//   }
  .top{
    position: relative;
    z-index: 9;
  }
  // 布局滚动
  .content{
    height: calc(100vh - 98px);
    overflow-y: auto;
    // margin-top: 98px;
  }
}

</style>